/*
 * @Author: xiaoyan
 * @Date: 2021-11-19 16:04:24
 * @LastEditors: xiaoyan
 * @LastEditTime: 2021-11-24 10:59:23
 * @Description: 
 * @FilePath: \user_auth_front\src\components\sidebar\index.tsx
 */
import { Menu} from "antd"
import "./index.scss"
import logo from "@/assets/images/common/logo.png"
import { useMappedState } from 'redux-react-hook';
import { useNavigate,Link,useLocation } from "react-router-dom";
import {menus} from "@/constant"
export default function Sidebar(){
    const navigate = useNavigate();
    const getHome = ()=>{
        navigate('/home');
    };
    const collapsed = useMappedState(state=>state.app.collapsed);
    const menuList = menus.filter(item=>item.isMenu).map(item=>
        <Menu.Item key={item.path} icon={<item.icon />}>
            <Link to={item.path}>{item.title}</Link>
        </Menu.Item>
    );
    const defaultSelectedKeys = [useLocation().pathname];
    return (
        <div className="side-container">
            <div className={`logo ${collapsed?'':'minLogo'}`} onClick={getHome}>
                <img src={logo} alt="用户管理"/>
                <span className="name">用户管理</span>
            </div>
            <Menu
                mode="inline"
                defaultSelectedKeys={defaultSelectedKeys}
                inlineCollapsed={!collapsed}
            >
                {menuList}
            </Menu>
        </div>
    );
}